<!doctype html>
<html lang="en">
<head>
  <script type="text/javascript">
    safari.application.addEventListener( "message", function( e ) {
      if( e.name === "getData" ) {
        e.target.page.dispatchMessage( "setData", {
          css: document.head.getElementsByTagName( "style" )[0].textContent,
          toolbar: document.getElementById( "toolbar" ).outerHTML,
          settings: {
            fold_strings: safari.extension.settings.getItem( "fold_strings" ),
            long_string_length: safari.extension.settings.getItem( "long_string_length" ),
            sort_keys: safari.extension.settings.getItem( "sort_keys" )
          }
        } );
      }
    }, false );
  </script>

  <style type="text/css">
    /* reset */
    dl, dt, dd, ol, li {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: monospace;
      margin: 0;
      padding: 12px;
    }
    body,
    .delimiter,
    .decorator,
    .separator {
      color: #000;
    }

    #before { display: none; }
    body.before #before { display: block; }
    body.before #after { display: none; }
    body.before #toolbar { position: static; }

    #after {
      padding-left: 1em;
    }

    #toolbar {
      border: 1px solid #8c8c8c;
      border-radius: 5px;
      float: right;
      font-family: "lucida grande", sans-serif;
      overflow: hidden;
      font-size: 0;
      padding: 0;
      position: absolute;
      top: 12px;
      right: 12px;
      margin: 0 0 6px 6px;
      -webkit-user-select: none;
      z-index: 9999;
    }
    #toolbar li {
      background: -webkit-gradient( linear, 0 0, 0 100%, from(#f4f4f4), to(#bebebe) );
      color: #3f3f3f;
      cursor: pointer;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      line-height: 21px;
      padding: 0 7px 1px;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, 0.8);
    }
    #toolbar li:active {
      background: -webkit-gradient( linear, 0 0, 0 100%, from(#bebebe), to(#f4f4f4) );
    }

    dl,
    ol {
      padding: 0 0 0 1.5em;
      margin: 0;
    }

    /* hide commas for last elements */
    #after > * > .separator,
    .value > *:last-child > * > .separator {
      display: none;
    }

    /* labels */
    dt {
      font-weight: bold;
      float: left;
    }

    /* values */
    span.value { color: #339; }
    div.string .value,
    div.string .decorator {
      color: #393;
    }
    div.string {
      padding-left: 1.5em;
      white-space: pre-wrap;
    }

    /* disclosure triangles */
    .collapsible {
      position: relative;
    }
    .disclosure {
       -webkit-transform: scale(0.65, 1);

      border: 0.65em solid transparent;
      border-top-color: #000;
      border-bottom-width: 0;
      cursor: pointer;
      height: 0;
      top: 0.3em;
      left: -1.2em;
      position: absolute;
      width: 0;
    }
    .collapsible.closed > .disclosure {
      -webkit-transform: scale(1, 0.65);

      border: 0.65em solid transparent;
      border-left-color: #000;
      border-right-width: 0;
      top: 0;
      left: -0.95em;
    }
    .collapsible.closed > .value { display: none; }
    .collapsible.closed > .disclosure + .decorator::after {
      color: #339;
      content: "...";
    }

    /* separation between labels and values */
    dt { margin-right: 0.5em; }

    /* dim the delimiters */
    .decorator,
    .delimiter,
    .separator,
    .disclosure {
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <ul id="toolbar">
    <li>Toggle Formatting</li>
  </ul>
</body>
</html>
